<template>
	<view class="my_container">
		<custom-navbar-two :title="pageTitle" :style="navbarStyle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_button">
				<view @click="updateCollor(1)" :class="{ activeClass: busPubInfo.resourceType == 1 }">我要发售</view>
				<view @click="updateCollor(2)" :class="{ activeClass: busPubInfo.resourceType == 2 }">我要求购</view>
			</view>
			<view class="my_container_body_card">
				<view class="head">
					<view>资源分类</view>
					<view @click="level1" class="title_one">{{ busPubInfo.product1 == '' ? '品类' : busPubInfo.product1 }}
					</view>
					<image></image>
					<view @click="showProp" class="title">{{ busPubInfo.product2 == '' ? '品种' : busPubInfo.product2 }}
					</view>
					<image></image>
					<view class="title">{{ busPubInfo.product3 == '' ? '品名' : busPubInfo.product3 }}</view>
					<image></image>
					<!-- <view class="title">四级</view>
					<image></image> -->
				</view>
				<view class="xian"></view>
				<view class="my_input">
					<view class="my_input_head">
						<view class="head_head">标题</view>
						<view class="head_input">
							<u--input v-model="busPubInfo.title" border="bottom" clearable></u--input>
						</view>
					</view>
					<view class="my_input_body">
						<u--textarea v-model="busPubInfo.pubContent" :formatter="formatter" ref="textarea"
							placeholder="文本内容无需加上号码" clearable></u--textarea>
					</view>
				</view>
				<view class="my_input_yuyin">
					<view>打字太慢，试试语音输入</view>
					<image @click="showRecordPopup = true" src="../../static/imags/Voice.png"></image>
				</view>
				<!-- <view class="my_input_biaoti" >上传图片/视频(限4张图片，1个视频)</view> -->
				<view class="my_input_biaoti">上传图片(限4张图片)</view>
				<view class="show_add">
					<view class="show_add_left" @click="upPicVide">
						<image src="../../static/imags/photo.png"></image>
						<view>上传图片</view>
					</view>
					<!-- <view class="show_add_right" @click="uploadVide">
						<image src="../../static/imags/video.png"></image>
						<view >上传视频</view>
					</view> -->
				</view>
				<view class="photoShow" v-if="busPubInfo.picList.length > 0">
					<view class="photoShowItem" v-for="(item, index) in busPubInfo.picList">
						<image @click="previewMyImage(index)" :src="item.fileUrl" :key="index"></image>
						<text class="delete-btn" @click.stop="removeImage(index)">x</text>
					</view>
				</view>
				<view class="photoNo" v-else>暂未上传图片</view>
				<view class="videoShow" v-if="busPubInfo.videoList.length > 0">
					<video class="video1" id="myVideo" :src="busPubInfo.videoList[0].fileUrl" enable-danmu danmu-btn
						controls></video>
				</view>
				<!-- <view class="videoShow" style="text-align: center;"  v-else>
					<view>暂未上传视频</view>
				</view> -->
				<view style="height: 20rpx"></view>
			</view>
			<view class="fotter_input">
				<view class="fotter_input_head">
					<view class="fotter_input_head_o">价格</view>
					<view class="input-wrap">
						<view v-if="busPubInfo.phonePrice != '1'" class="fotter_input_head_tw">
							<u--input inputAlign="center" border="none" v-model="busPubInfo.price"></u--input>
						</view>
						<view @tap="handleUnitChange" v-if="busPubInfo.phonePrice != '1'" class="fotter_input_head_t">
							{{ priceUnit }}
						</view>
						<image @tap="handleUnitChange" v-if="busPubInfo.phonePrice != '1'" class="fotter_input_head_f"
							src="../../static/imags/Vector.png"></image>
					</view>
					<view class="label">
						<u-checkbox-group v-model="labelList" placement="column">
							<u-checkbox activeColor="#1ee825" @change="handleRadio" label="电议" name="电议"></u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view class="fotter_input_head">
					<view class="fotter_input_head_o">位置</view>
					<view class="input-wrap1" @tap="showRegion = true">
						<u-input :readonly="true" inputAlign="right" v-model="busPubInfo.address" placeholder="请选择地区"
							border="none" />
					</view>
				</view>
			</view>
			<view class="foter_bottom" @click="add">立即发布</view>
			<view style="height: 28rpx"></view>
			<u-picker :show="showLevel1" :columns="columns" keyName="label" @confirm="confirm1"
				@cancel="cancel1"></u-picker>
			<!-- 筛选条件部分 -->
			<u-overlay :show="showPopup">
				<view class="content" v-if="showPopup">
					<view class="head_der">
						<!-- 左侧分类列表 -->
						<view class="left-menu">
							{{ busPubInfo.product1 }}
						</view>
						<!-- 右侧标签组 -->
						<scroll-view class="right-content" scroll-y>
							<view class="tag-group" v-for="(group, groupIndex) in groups" :key="groupIndex">
								<!-- 组标题 -->
								<view class="group-header" @click="toggleGroup(groupIndex)">
									<view class="group-title">{{ group.name }}</view>
									<image
										:src="group.expanded ? '../../static/imags/shang.png' : '../../static/imags/xia.png'"
										class="toggle-icon"></image>
								</view>
								<!-- 标签列表 -->
								<view class="tag-list" v-if="group.expanded">
									<view class="tag" v-for="(tag, tagIndex) in group.tags" :key="tagIndex"
										:class="{ active: tag.expanded }" @click="toggleTag(groupIndex, tagIndex)">
										{{ tag.name }}
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="footer">
						<view class="btn cancel" @click="closePopup">取消</view>
						<view class="btn reset" @click="resetFilters">重置</view>
						<view class="btn confirm" @click="confirmSelection">确定</view>
					</view>
				</view>
			</u-overlay>
		</view>
		<!-- 录音弹窗 -->
		<view v-if="showRecordPopup" class="record-modal">
			<view class="modal-content">
				<!-- 弹窗标题 -->
				<text class="modal-title">长按录音</text>
				<!-- 录音按钮 -->
				<button class="record-btn" @touchstart="startRecord" @touchend="stopRecord"
					:class="{ recording: isRecording }">
					{{ isRecording ? '松开结束' : '长按录音' }}
				</button>
				<!-- 录音时长显示 -->
				<text class="timer" v-if="isRecording">{{ recordTime }}秒</text>
				<!-- 关闭弹窗按钮 -->
				<button class="close-btn" @tap="closeModal">关闭</button>
			</view>
		</view>
		<!-- 识别结果 -->
		<view class="result-box" v-if="resultText">
			<text>{{ resultText }}</text>
		</view>
		<!-- 单位选择器 -->
		<u-picker :show="showUnitPicker" :columns="showUnitcolumns" keyName="label" @confirm="confirmUnit"
			@cancel="showUnitPicker = false" />
		<u-picker :show="showRegion" :loading="loading" ref="uPicker3" :columns="columns3" @confirm="regionConfirm"
			@cancel="showRegion = false" @change="changeHandler"></u-picker>
	</view>
</template>
<script>
	import formItem from 'uview-ui/libs/config/props/formItem.js';
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	const api = require('../../util/api.js');
	const plugin = requirePlugin('WechatSI');
	const manager = plugin.getRecordRecognitionManager();
	export default {
		components: {
			CustomNavbarTwo
		},
		data() {
			return {
				showUnitPicker: false,
				priceUnit: '元/吨', // 当前选中的单位
				showUnitcolumns: [
					[{
							label: '元/吨',
							value: 1
						},
						{
							label: '元/台',
							value: 2
						}
					]
				],
				labelList: [],
				columns3: [],
				columnData: [],
				loading: false,
				showRegion: false,
				showRecordPopup: false, // 控制弹窗显示
				isRecording: false, // 录音状态
				resultText: '', // 识别结果
				recordTime: 0, // 录音时长（秒）
				timer: null, // 计时器
				busPubInfo: {
					id: null,
					resourceType: 1,
					product1: '',
					product2: '',
					product3: '',
					title: '',
					pubContent: '',
					price: '',
					videoList: [],
					picList: [],
					province: '',
					provinceName: '',
					city: '',
					cityName: '',
					district: '',
					address: '',
					lat: '',
					lon: ''
				},
				parentId: null,
				showLevel1: false,
				columns: [
					[{
							id: 1,
							label: '废纸'
						},
						{
							id: 2,
							label: '设备'
						},
						{
							id: 3,
							label: '废塑料'
						}
					]
				],
				showPopup: false,
				groups: [],
				groupIndex: null,
				tagIndex: null,
				pageTitle: '发布内容',
				value: ''
			};
		},
		onLoad() {
			this.initRecognition();
			this.getAddress();
		},
		onUnload() {
			if (this.timer) clearInterval(this.timer);
		},
		methods: {
			//获取位置信息
			getAddress() {
				this.$https.post(this.$api.getAddress).then((res) => {
					if (res.code === 200) {
						const data = res.data;
						this.columns3 = res.data.parent;
						this.columnData = res.data.child;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.show = false;
					}
				});
			},
			// 确认选择
			regionConfirm(e) {
				const p = e.value[0];
				const c = e.value[1];
				if ('全部' == p) {
					this.busPubInfo.province = '';
					this.busPubInfo.city = '';
				} else {
					this.busPubInfo.province = p;
					this.busPubInfo.city = c;
				}
				this.busPubInfo.address = this.busPubInfo.province + this.busPubInfo.city;
				this.showRegion = false;
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker3
				} = e;
				const name = e.value[0];
				if (columnIndex === 0) {
					this.loading = true;
					// 模拟网络请求
					uni.$u.sleep(500).then(() => {
						picker.setColumnValues(1, this.columnData[index]);
						this.loading = false;
					});
				}
			},
			// 显示单位选择器
			handleUnitChange() {
				this.showUnitPicker = true;
			},
			// 确认单位选择
			confirmUnit(e) {
				this.priceUnit = e.value[0].label;
				this.showUnitPicker = false;
			},
			handleRadio(e) {
				console.log(e);
				if (e) {
					this.busPubInfo.phonePrice = 1;
					this.busPubInfo.price = null;
				} else {
					this.busPubInfo.phonePrice = 0;
				}
			},
			// 打开弹窗
			openRecordModal() {
				this.showRecordPopup = true;
			},
			// 关闭弹窗
			closeModal() {
				this.showRecordPopup = false;
				if (this.isRecording) this.stopRecord(); // 强制停止录音
			},
			// 开始录音
			startRecord() {
				this.isRecording = true;
				this.busPubInfo.pubContent = '';
				this.recordTime = 0;
				// 启动计时器
				this.timer = setInterval(() => {
					this.recordTime++;
				}, 1000);
				manager.start({
					lang: 'zh_CN',
					duration: 60000
				});
			},
			// 停止录音
			stopRecord() {
				clearInterval(this.timer);
				this.isRecording = false;
				manager.stop();
				this.showRecordPopup = false; // 自动关闭弹窗
			},
			// 初始化识别回调
			initRecognition() {
				manager.onStop = (res) => {
					if (res.result) {
						this.busPubInfo.pubContent = res.result;
					} else if (this.recordTime < 1) {
						this.busPubInfo.pubContent = '录音时间太短';
					}
				};
				manager.onError = (res) => {
					this.busPubInfo.pubContent = `识别失败：${res.msg}`;
				};
			},
			getMyLoction() {
				const _that = this;
				_that.busPubInfo.lat = '';
				_that.busPubInfo.lon = '';
				uni.showLoading({
					title: '定位中,请稍后'
				});
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log(res, '这是定位信息');
						_that.busPubInfo.lat = res.latitude;
						_that.busPubInfo.lon = res.longitude;
						_that.lat = res.latitude;
						_that.lon = res.longitude;
						_that.getAddressByLanLen(res.latitude, res.longitude);
					}
				});
			},
			getAddressByLanLen(lat, lon) {
				let data = {
					lat: lat,
					lon: lon
				};
				this.$https.post(this.$api.getAddressByLanLen, data).then((res) => {
					console.log(res, 788);
					if (res.code === 200) {
						const data = res.data;
						this.busPubInfo.province = data.provinceName;
						this.busPubInfo.provinceName = data.provinceName;
						this.busPubInfo.city = data.cityName;
						this.busPubInfo.cityName = data.cityName;
						this.busPubInfo.address = data.provinceName + data.cityName + data.districtName;
						uni.setStorageSync('address', JSON.stringify(res.data));
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
					uni.hideLoading();
				});
			},
			speak() {},
			upPicVide() {
				if (this.busPubInfo.picList.length >= 4 && this.busPubInfo.id == null) {
					return;
				}
				let count = 4 - this.busPubInfo.picList.length;
				const _that = this;
				uni.chooseImage({
					count: count,
					sourceType: ['camera', 'album'],
					success: function(res) {
						console.log(res.tempFilePaths);
						// const url = res.tempFilePaths[0];
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							const url = res.tempFilePaths[i]; // 使用当前索引的路径
							_that.upload(url, 2);
						}
					}
				});
			},
			removeImage(index) {
				this.busPubInfo.picList.splice(index, 1);
			},
			previewMyImage(index) {
				// index 索引 如果 需要复用方法 可以使用 类型来进行区分(val)
				var photoList = this.busPubInfo.picList.map((item) => {
					return item.url;
				});
				uni.previewImage({
					current: index, // 当前显示图片的索引值
					urls: photoList, // 需要预览的图片列表，photoList要求必须是数组
					loop: true // 是否可循环预览
				});
			},
			uploadVide() {
				const _that = this;
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {
						const url = res.tempFilePath;
						_that.upload(url, 1);
					}
				});
			},
			upload(imgUrl, type) {
				const _that = this;
				uni.uploadFile({
					url: _that.$api.upload,
					filePath: imgUrl,
					name: 'file',
					header: {
						'Content-Type': 'application/json',
						Authorization: 'Bearer ' + uni.getStorageSync('token')
					},
					formData: {},
					success: (uploadFileRes) => {
						const result = uploadFileRes.data;
						console.log(uploadFileRes);
						var res = JSON.parse(result);
						if (res.code === 200) {
							console.log(res.data);
							if (type == 1) {
								_that.busPubInfo.videoList = [];
								_that.busPubInfo.videoList.push({
									ossId: res.data.ossId,
									fileUrl: res.data.url,
									fileType: '2'
								});
							} else {
								_that.busPubInfo.picList.push({
									ossId: res.data.ossId,
									fileUrl: res.data.url,
									fileType: '1'
								});
							}
						} else {
							uni.showToast({
								title: res.errMsg,
								icon: 'none'
							});
						}
					}
				});
			},
			// 切换组的展开状态
			toggleGroup(groupIndex) {
				this.groups[groupIndex].expanded = !this.groups[groupIndex].expanded;
			},
			// 切换标签的选中状态
			toggleTag(groupIndex, tagIndex) {
				const flag = this.groups[groupIndex].tags[tagIndex].expanded;
				// 遍历所有组和标签，将 selected 设置为 false
				this.groups.forEach((group) => {
					group.tags.forEach((tag) => {
						tag.expanded = false;
					});
				});
				this.groups[groupIndex].tags[tagIndex].expanded = !flag;
				this.groupIndex = groupIndex;
				this.tagIndex = tagIndex;
			},
			resetFilters() {
				this.groups.forEach((group) => {
					group.tags.forEach((tag) => {
						tag.expanded = false;
					});
				});
				this.groupIndex = -1;
				this.tagIndex = -1;
			},
			showProp() {
				this.showPopup = true;
			},
			closePopup() {
				this.showPopup = false;
			},
			confirmSelection() {
				if (this.groupIndex != -1 && this.tagIndex != -1) {
					this.busPubInfo.product2 = this.groups[this.groupIndex].name;
					this.busPubInfo.product3 = this.groups[this.groupIndex].tags[this.tagIndex].name;
				} else {
					this.busPubInfo.product2 = '';
					this.busPubInfo.product3 = '';
				}
				this.closePopup();
			},
			showu() {
				if (this.showPopup) {
					return;
				}
				this.show2 = true;
			},
			level1() {
				this.showLevel1 = true;
			},
			confirm1(e) {
				console.log(e, 555);
				this.busPubInfo.product1 = e.value[0].label;
				this.parentId = e.value[0].id;
				//查询二级分类
				this.productTypeList();
				this.showLevel1 = false;
			},
			cancel1() {
				this.busPubInfo.product1 = '';
				this.parentId = null;
				this.showLevel1 = false;
			},
			updateCollor(btn) {
				this.busPubInfo.resourceType = btn;
			},
			productTypeList() {
				const query = {
					parentId: this.parentId
				};
				this.$https.post(this.$api.productTypeList, query).then((res) => {
					if (res.code === 200) {
						this.groups = res.data;
						this.groups.forEach((group) => {
							group.tags.forEach((tag) => {
								tag.expanded = false;
							});
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			add() {
				console.log(this.busPubInfo);
				// return
				if (
					this.busPubInfo.picList.length == 0 ||
					!this.busPubInfo.address ||
					!this.busPubInfo.pubContent ||
					!this.busPubInfo.product1 ||
					!this.busPubInfo.product2
				) {
					return uni.showToast({
						title: '请完善信息',
						icon: 'error'
					});
				}
				uni.showLoading({
					title: '发布中，请稍等！'
				});
				this.$https.post(this.$api.addpubInfo, this.busPubInfo).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: '发布成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1 // 返回的页面层级，1表示返回上一页
							});
						}, 1000);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}
		},
		onReady() {}
	};
</script>
<style lang="scss" scoped>
	/* 在现有样式中添加 */
	.u-action-sheet {
		z-index: 99999;
	}

	/* 弹窗蒙层 */
	.record-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 弹窗内容 */
	.modal-content {
		width: 80%;
		background-color: white;
		border-radius: 20rpx;
		padding: 40rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.modal-title {
		font-size: 36rpx;
		margin-bottom: 40rpx;
		display: block;
	}

	/* 录音按钮 */
	.record-btn {
		width: 240rpx;
		height: 240rpx;
		line-height: 240rpx;
		border-radius: 50%;
		background-color: #4caf50;
		color: white;
		margin: 20rpx auto;
		transition: background-color 0.3s;
	}

	.record-btn.recording {
		background-color: #f44336;
	}

	/* 计时器 */
	.timer {
		display: block;
		margin: 20rpx 0;
		color: #666;
		font-size: 32rpx;
	}

	/* 关闭按钮 */
	.close-btn {
		width: 160rpx;
		margin-top: 40rpx;
		background-color: #999;
		color: white;
	}

	/* 结果展示 */
	.result-box {
		margin: 40rpx;
		padding: 30rpx;
		border: 2rpx solid #eee;
		border-radius: 16rpx;
	}

	.my_container {
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-style: normal;
		text-transform: none;
		background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);
		height: 100%;
		width: 100%;

		.my_container_body {
			width: 750rpx;

			.my_container_body_head {
				width: 686rpx;
				height: 176rpx;
			}

			.my_container_body_button {
				margin-top: 12rpx;
				display: flex;
				width: 750rpx;
				height: 90rpx;

				.activeClass {
					background: #1ee825;
					color: white;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 28rpx;
					font-style: normal;
					text-transform: none;
				}

				view {
					width: 330rpx;
					height: 90rpx;
					text-align: center;
					line-height: 90rpx;
					margin-left: 32rpx;
					background: white;
					color: black;
					border-radius: 84rpx 84rpx 84rpx 84rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 28rpx;
					font-style: normal;
					text-transform: none;
				}
			}

			.my_container_body_card {
				width: 686rpx;
				margin-left: 32rpx;
				margin-top: 20rpx;
				background: #ffffff;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.head {
					width: 686rpx;
					height: 90rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 90rpx;
					display: flex;

					:nth-child(1) {
						width: 112rpx;
						height: 90rpx;
						margin-left: 32rpx;
						text-align: left;
					}

					.title_one {
						width: 80rpx;
						text-align: right;
					}

					.title {
						width: 172rpx;
						height: 90rpx;
						text-align: right;
					}

					image {
						width: 28rpx;
						height: 28rpx;
						margin-top: 31rpx;
						background-image: url('/static/imags/xia_two.png');
					}
				}

				.xian {
					width: 622rpx;
					height: 0rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					border: 1rpx solid #e4e4e4;
					margin-left: 32rpx;
				}

				.my_input {
					width: 686rpx;
					height: 280rpx;

					.my_input_head {
						height: 90rpx;
						width: 622rpx;
						margin-left: 32rpx;
						display: flex;

						.head_head {
							width: 72rpx;
							height: 90rpx;
							line-height: 90rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 32rpx;
							color: #333333;
							font-style: normal;
							text-transform: none;
						}

						.head_input {
							width: 550rpx;
							height: 70rpx;
							line-height: 70rpx;
							margin-top: 15rpx;
						}
					}

					.my_input_body {
						width: 622rpx;
						margin-left: 32rpx;
						height: 172rpx;
						margin-top: 10rpx;
					}
				}

				.my_input_yuyin {
					display: flex;
					width: 686rpx;
					margin-left: 32rpx;
					height: 40rpx;
					margin-top: 12rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
					font-style: normal;
					text-transform: none;

					view {
						width: 354rpx;
						height: 40rpx;
					}

					image {
						width: 42rpx;
						height: 40rpx;
						margin-left: 16rpx;
					}
				}

				.my_input_biaoti {
					margin-top: 26rpx;
					width: 454rpx;
					height: 40rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 39rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-left: 32rpx;
				}

				.show_add {
					margin-top: 26rpx;
					margin-left: 32rpx;
					width: 630rpx;
					height: 156rpx;
					display: flex;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;

					.show_add_left {
						width: 304rpx;
						height: 156rpx;
						background: #f6f6f6;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						display: flex;

						image {
							width: 64rpx;
							height: 64rpx;
							margin-top: 46rpx;
							margin-left: 28rpx;
						}

						view {
							width: 104rpx;
							height: 36rpx;
							margin-top: 60rpx;
							margin-left: 24rpx;
						}
					}

					.show_add_right {
						width: 304rpx;
						height: 156rpx;
						background: #f6f6f6;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						margin-left: 22rpx;
						display: flex;

						image {
							width: 64rpx;
							height: 64rpx;
							margin-top: 46rpx;
							margin-left: 28rpx;
						}

						view {
							width: 104rpx;
							height: 36rpx;
							margin-top: 60rpx;
							margin-left: 24rpx;
						}
					}
				}

				.photoShow {
					margin-top: 30rpx;
					width: 666rpx;
					height: 144rpx;
					display: flex;

					.photoShowItem {
						position: relative;
						height: 144rpx;
						width: 144rpx;
						margin-left: 12rpx;

						image {
							height: 144rpx;
							width: 144rpx;
							margin-left: 18rpx;
							border-radius: 20rpx 20rpx 20rpx 20rpx;
						}

						.delete-btn {
							position: absolute;
							text-align: center;
							top: -20rpx;
							right: -24rpx;
							font-size: 36rpx;
							width: 20rpx;
							height: 20rpx;
							color: black;
							// cursor: pointer;
							// border: solid 2rpx #333;
						}
					}
				}

				.photoNo {
					margin-top: 30rpx;
					width: 666rpx;
					margin-left: 12rpx;
					height: 144rpx;
					text-align: center;
					line-height: 144rpx;
				}

				.videoShow {
					margin-top: 30rpx;
					width: 630rpx;
					margin-left: 28rpx;
					height: 144rpx;

					.video1 {
						width: 630rpx;
						height: 144rpx;
					}
				}
			}

			.fotter_input {
				width: 686rpx;
				height: 208rpx;
				background: #ffffff;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 28rpx;
				margin-left: 32rpx;

				.fotter_input_head {
					height: 94rpx;
					width: 622rpx;
					margin-left: 32rpx;
					border-bottom: 1rpx solid #e4e4e4;
					display: flex;

					.input-wrap {
						width: 444rpx;
						display: flex;
					}

					.input-wrap1 {
						flex: 1;
						display: flex;
					}

					.label {
						display: flex;
						justify-content: center;
						align-items: center;
						padding-left: 10rpx;
					}

					.fotter_input_head_o {
						line-height: 104rpx;
						width: 60rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.fotter_input_head_tw {
						width: 337rpx;
						height: 70rpx;
						line-height: 70rpx;
						margin-top: 17rpx;
						padding-top: 11rpx;
					}

					.fotter_input_head_t {
						width: 70rpx;
						line-height: 104rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #777777;
						text-align: right;
						font-style: normal;
						text-transform: none;
					}

					.fotter_input_head_f {
						width: 28rpx;
						height: 28rpx;
						margin-top: 33rpx;
						margin-left: 10rpx;
					}
				}

				.fotter_input_body {
					height: 94rpx;
					line-height: 94rpx;
					width: 622rpx;
					margin-left: 32rpx;
					display: flex;

					.fotter_input_body_o {
						width: 60rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.fotter_input_body_tw {
						margin-left: 10rpx;
						width: 504rpx;
						font-size: 26rpx;
						text-align: left;
					}

					.fotter_input_body_f {
						width: 28rpx;
						height: 28rpx;
						margin-top: 33rpx;
						margin-left: 10rpx;
					}
				}
			}

			.foter_bottom {
				margin-top: 28rpx;
				width: 686rpx;
				margin-left: 32rpx;
				height: 92rpx;
				line-height: 92rpx;
				background: #1ee825;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 30rpx;
				color: #ffffff;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}

		// 变量定义
		.content {
			position: fixed;
			/* 固定位置 */
			bottom: 0;
			/* 从屏幕底部开始 */
			left: 0;
			/* 水平从左侧开始 */
			width: 100%;
			/* 占满屏幕宽度 */
			height: 810rpx;
			/* 内容高度 */
			background: #ffffff;
			flex-direction: column;
			z-index: 9999;
			/* 确保覆盖内容部分 */
			background: #ffffff;

			.head_der {
				width: 100%;
				display: flex;

				// 左侧分类列表
				.left-menu {
					width: 178rpx;
					height: 676rpx;
					background: #f6f6f6;
					border-radius: 0rpx 24rpx 24rpx 0rpx;
					text-align: center;
					line-height: 676rpx;
				}

				// 右侧标签组
				.right-content {
					flex: 1;
					width: 512rpx;
					height: 676rpx;
					overflow-y: scroll;
					margin-left: 30rpx;

					.tag-group {
						width: 512rpx;
						margin-bottom: 20rpx;

						.group-header {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 10rpx 0;
							font-size: 28rpx;
							color: #333;
							border-bottom: 1px solid #ddd;

							.group-title {
								flex: 1;
								font-weight: 550;
							}

							.toggle-icon {
								width: 28rpx;
								height: 28rpx;
							}
						}

						.tag-list {
							display: flex;
							flex-wrap: wrap;
							gap: 10rpx;
							margin-top: 10rpx;

							.tag {
								padding: 10rpx 20rpx;
								font-size: 24rpx;
								background-color: #f4f4f4;
								border-radius: 20rpx;
								color: #333;
								cursor: pointer;

								&.active {
									background-color: #1ee825;
									color: #fff;
								}
							}
						}
					}
				}
			}

			// 底部操作栏
			.footer {
				display: flex;
				width: 750rpx;
				height: 134rpx;

				.btn {
					width: 207rpx;
					height: 76rpx;
					background: #ffffff;
					border-radius: 84rpx 84rpx 84rpx 84rpx;
					border: 2rpx solid #dadada;
					font-weight: 400;
					font-size: 28rpx;
					color: #777777;
					margin-left: 32rpx;
					text-align: center;
					line-height: 76rpx;
					margin-top: 32rpx;

					&.confirm {
						color: #ffffff;
						background: #1ee825;
					}
				}
			}
		}
	}
</style>